import 'dart:ui';

import 'package:flutter/material.dart';
import 'dart:math';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: ListView.separated(
        separatorBuilder: (c, i) => SizedBox(height: 10,),
        itemBuilder: (BuildContext context, int index) {
          return CustomPaintRoute();
        }, 
        itemCount: 100,
      )
    ),
  ));
}

class CustomPaintRoute extends StatelessWidget {
  const CustomPaintRoute({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: CustomPaint(
        size: Size(300, 300),
        painter: MyPainter(),
      ),
    );
  }
}

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    const count = 15;
    double eWidth = size.width / count;
    double eHeight = size.height / count;

    var paint = Paint();

    // 画棋盘背景
    paint
      ..isAntiAlias = true
      ..style = PaintingStyle.fill
      ..color = Color(0x77cdb175); //背景为纸黄色
    canvas.drawRect(Offset.zero & size, paint);

    // 画棋盘网格
    paint
      ..style = PaintingStyle.stroke
      ..color = Colors.black87
      ..strokeWidth = 1.0;
    for (int i = 0; i <= count; i++) {
      double dy = eHeight * i;
      canvas.drawLine(Offset(0, dy), Offset(size.width, dy), paint);

      double dx = eWidth * i;
      canvas.drawLine(Offset(dx, 0), Offset(dx, size.height), paint);
    }

    // 画一个黑子
    paint
      ..strokeWidth = min(eWidth, eHeight) - 4
      ..strokeCap = StrokeCap.round
      ..style = PaintingStyle.fill
      ..color = Colors.black;
    Offset offset0 =
        Offset(size.width / 2 - eWidth / 2, size.height / 2 - eHeight / 2);
    canvas.drawPoints(PointMode.points, [offset0], paint);

    //画一个白子
    paint.color = Colors.white;
    canvas.drawCircle(
      Offset(size.width / 2 + eWidth / 2, size.height / 2 - eHeight / 2),
      min(eWidth / 2, eHeight / 2) - 2,
      paint,
    );
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}
